<template>
  <div id="bar-vertical"></div>
</template>

<script>
/**
 * {
 *
 *  xAxisData:["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
 *  yAxisData:[120, 200, 150, 80, 70, 110, 130],
 *
 * }
 */
import * as echarts from "echarts";
export default {
  name: "BarVertical",
  props: ["barVerticalData"],
  mounted() {
    const chartDom = document.getElementById("bar-vertical");
    const myChart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: "category",
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [],
          type: "bar",
        },
      ],
    };
    option.xAxis.data = this.barVerticalData.xAxisData;
    option.series[0].data = this.barVerticalData.yAxisData;

    option && myChart.setOption(option);
  },
};
</script>

<style lang='less' scoped>
#bar-vertical {
  width: 100%;
  height: 100%;
}
</style>